<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<c:set var="STATUS">
	<spring:eval expression="@code['member.status.normal']" />
</c:set>
<style>
	/* #modal .modal-dialog {
  		width: 50%;
	} */
</style>
<jsp:include page="../modal.jsp"/>
<div class="row">

	<div class="col-lg-12">
		
		<div id="alert_placeholder" style="display:none;"></div>
		
		<form id="searchform" name="searchform">
		<div class="panel panel-success">
			<div class="panel-heading">
				검색 조건
			</div>
			<div class="panel-body">
				<div class="row">
                	<div class="col-lg-2">
                		<div class="input-group">
                        	<span class="input-group-addon"><i class="fa fa-key fa" style="width:15px;"></i></span>
                            <input class="form-control"  id="user_id" name="user_id" placeholder="아이디" />
						</div>
                	</div>
                	<div class="col-lg-2">
	                	<div class="input-group">
                        	<span class="input-group-addon"><i class="fa fa-user fa" style="width:15px;"></i></span>
                            <input class="form-control"  id="user_name" name="user_name"  placeholder="이름" />
						</div>
                	</div>
                	<div class="col-lg-2">
	                	<div class="input-group">
                        	<span class="input-group-addon"><i class="glyphicon glyphicon-envelope" style="width:15px;"></i></span>
                            <input class="form-control"  id="email" name="email"  placeholder="이메일" />
						</div>
                	</div>
                	<div class="col-lg-2">
	                	<div class="input-group">
                        	<span class="input-group-addon"><i class="fa fa-phone-square fa" style="width:15px;"></i></span>
                            <input class="form-control"  id="phone" name="phone"  placeholder="휴대 or 일반 전화" />
						</div>
                	</div>
                	<div class="col-lg-2">
	                	<div class="input-group">
                        	<span class="input-group-addon"><i class="fa fa-gear fa" style="width:15px;"></i></span>
                            <select class="form-control" id="status" name="status">
						   		<option value="">전체</option>
                               <c:forEach items="${statusList}" var="list">
                               	<option value="${list.CODE}">${list.NAME}</option>
                               </c:forEach>
                            </select>
						</div>
                	</div>
                	<div class="col-lg-2">
                	</div>
                	<div class="col-lg-2" style="text-align: right;">
                		<button type="reset" class="btn btn-default">비우기</button>
                		<button id="searchBtn" type="button" class="btn btn-warning" >검색</button>
                	</div>
                </div>
			</div>
		</div>
		</form>
				 <!-- <div class="table-responsive"> -->
				 <div class="dataTable_wrapper">
				 	<table class="table table-striped table-bordered table-hover" id="datatable_list">
				 			 
				 		<thead>
                            <tr>
                                <th><i class="fa fa-key fa" style="width:15px;"></i>아이디</th>
                                <th>직급</th>
                                <th><i class="fa fa-user fa" style="width:15px;"></i>이름</th>
                                <th><i class="glyphicon glyphicon-envelope" style="width:15px;"></i>이메일</th>
                                <th><i class="fa fa-phone-square fa" style="width:15px;"></i>휴대전화</th>
                                <th>권한</th>
                                <th>입사일</th>
                                <th>등록자</th>
                                <th>등록일</th>
                                <th><i class="fa fa-gear fa" style="width:15px;"></i>상태</th>
                            </tr>
                        </thead>
				 	</table>
				 </div>
			</div>
		</div>
	
<style>
	/* div.toolbar	{
		margin-bottom:10px;
	    float: right;
	    border: 0;
	    background: 0;
	} */
	
	/* .row_selected tr {
   		background-color: black !important;
	}  */
</style>
<script>
	var oTable;
	
	$(document).ready(function() {
		
		oTable = $('#datatable_list').dataTable({
			columnDefs:[
	
	            {data: "USER_ID", 			visible:true,	targets:0  },
	            {data: "POSITION_NAME", 	visible:true,	targets:1  },
	            {data: "USER_NAME", 		visible:true,	targets:2  },
	            {data: "EMAIL", 			visible:true,	targets:3  },
	            {data: "PHONE_1", 			visible:true,	targets:4  },
	            {data: "AUTH_LEVEL_NAME", 	visible:true,	targets:5  },
	            {data: "JOIN_DATE", 		visible:true,	targets:6  },
	            {data: "REG_USER", 			visible:true,	targets:7  },
	            {data: "REG_DATE", 			visible:true,	targets:8  },
	            {data: "STATUS_NAME", 		visible:true,	targets:9  }
	        ],
			bServerSide: true,
	    	bProcessing: true,
	    	bDeferRender: true,
	    	bAutoWidth: false,
	    	bRetrieve: true,
	    	bFilter: false,
	    	bInfo: true,
	    	searching: false,
	    	//stateSave: true,
	    	lengthMenu: [10, 15, 20, 25, 30, 35, 40, 45, 50, 100],
	    	pagingType: "full_numbers",
	    	aaSorting: [[ 8, "desc" ]],
	    	language: {
	            emptyTable: "<spring:message code='brd.no.record' />",
	            info: "Total Record : _MAX_"
	        },
	        sAjaxSource: "/member/listData.ur",
	        fnServerParams: function(aoData) {
	            var serializedForm = $('#searchform').serializeArray();
	            for (var n in serializedForm) {
	               var tmpobj = serializedForm[n];
	               var key = tmpobj['name'];
	               var value = tmpobj['value'];
	               aoData.push({"name":key,"value":value});
	            }
	        },
	        fnServerData: function ( sSource, aoData, fnCallback, oSettings ) {
	            oSettings.jqXHR = $.ajax( {
	              dataType: 'json',
	              type: "GET",
	              url: sSource,
	              data: aoData,
	              success: fnCallback,
	              error: function (e) {
	            	  bs_alert.modal("<spring:message code='comm.session.expire' />", "info","LOGOUT");
	              }
	            });
	        },
	    	fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
	
	    		if (aData.STATUS != '${STATUS}') {
	                $('td', nRow).css('color', 'Red');
	            }
	    	}
	        ,oTableTools: {
	            sRowSelect: "single",
	            aButtons: [ 
								/* { sExtends :'select_all' , 	sButtonText:'전체 선택' },
								{ sExtends :'select_none' , sButtonText:'전체 해제' }, */
								{ sExtends :'xls' , 		sButtonText:'엑셀 다운로드', 		sFileName: '*.xls' },
								{ sExtends :'copy' , 		sButtonText:'복사' }
	        				],
	            fnRowSelected: function(node){
	            	
	            	// SESSION 여부 확인
	            	if (!isSession()) {
	            		bs_alert.modal("<spring:message code='comm.session.expire' />", "info","LOGOUT");
	            		return false;
	            	}

	            	var s = $(node).children();
	            	
	            	$.ajax( {
	  	              	dataType: 'html',
	  	              	type: "POST",
	  	              	url: "/member/modifyForm.ur",
	  	              	data: {
	  	            	  		user_id: $(s[0]).text()
	  	            	  		,layout: 'N'
	  	              	},
						success: function(data) {
							
							$('#doc-modal-dialog').css('width', '70%');
							$('#doc-modal-body').html(data);
							$('#doc-modal-title').html($('#modal-title').html());
							$('#doc-modal').modal('toggle');
							
						},
						error: function(xhr, status, err) {
							alert(err);
	  	             	}
	  	            });
	            	
	             	
	            }
	        }
	    	,dom: '<"top"<"row"<"col-lg-6 text-left"T><"col-lg-6 text-right"l>>>rt<"bottom"<"row"<"col-lg-2 text-left"i><"col-lg-10 text-right"p>>>'
		});
	
	   	$('.form-control').keypress(function (e) {
			if (e.which == 13) {
				$('#searchBtn').trigger("click");
			}
	   	});
	    
		$('#searchBtn').click(function() {
					
			oTable.fnReloadAjax();
			
	    });
		
	});
	

</script>
